header{
    border-bottom: solid 5px #16a085;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    .navbar{
        display: flex;
        // height: 60px;
        padding:1rem 0;
        align-items: center;
        .collapse{
            display: flex;
            flex-grow:1;
            .links{
                display: flex;
                margin-right: auto;
                li{
                    margin:0 10px;
                }
                a{
                    color:#777;
                    &:hover{
                        font-weight: bold;
                    }
                }
            }
            .form{
                a{
                    border:1px solid #16a085;
                    border-radius: .3rem;
                    padding:.3rem 1rem;
                    color: #16a085;
                    &.form-bg{
                        background-color:#16a085;
                    }
                }
                a:nth-child(2){
                    color:white;
                }
            }
        }

        .logo{
            color:#16a085;
            font-weight: bold;
            margin-right: 20px;
            font-size:1.3rem;
            &+label{
                display: none;
                &+input{
                    display: none;
                }
            }
        }
    }
}

@media only screen and (max-width:960px){
    header{
        .navbar{
            flex-flow: row wrap;
            .collapse{
                display: none;
                width:100%;
                flex-flow: column;
                .links{
                    flex-direction: column;
                    margin-bottom: 1.5rem;
                    li{
                        margin:.5rem 0;
                    }
                }
            }

            .logo{
                margin-right: auto;
                &+label{
                    display: block;
                    border:solid 1px #ddd;
                    padding:.5rem 1rem;
                    color:#555;
                    cursor: pointer;
                    &+input{
                        display: none;
                    }
                    &+input:checked{
                        &+.collapse{
                            display: block;
                        }
                    }
                }
            }
        }
    }
}